<div class="h-full flex flex-col test-page-{{ currentPage }}">
  <ng-container *ngIf="currentPage === 'caseTest'">
    <form nz-form nzLayout="inline" class="px-[15px] min-h-[50px]" *ngIf="model?.request" (ngSubmit)="saveName()">
      <nz-form-item class="flex items-center">
        <nz-form-control *ngIf="isNameEdit">
          <input
            nz-input
            [(ngModel)]="name"
            name="required"
            required
            nzSize="small"
            eo-ng-input
            autofocus
            (ngModelChange)="valueChange()"
            (blur)="saveName()"
          />
        </nz-form-control>
        <ng-container *ngIf="!isNameEdit">
          <h5 nz-typography class="!mb-[0px]">{{ model.request.name }}</h5>
          <button nzSize="small" (click)="isNameEdit = !isNameEdit" eo-ng-button nzType="text" class="ml-[5px]">
            <eo-iconpark-icon size="12px" name="edit"></eo-iconpark-icon>
          </button>
          <button nzSize="small" (click)="delete()" eo-ng-button nzType="text" class="ml-[5px]">
            <eo-iconpark-icon size="12px" name="delete"></eo-iconpark-icon>
          </button>
        </ng-container>
      </nz-form-item>
    </form>
    <nz-divider class="my-0"></nz-divider>
  </ng-container>
  <eo-api-http-test-ui
    #testUIComponent
    [model]="model"
    class="flex-1 min-h-0"
    [module]="currentPage"
    (afterTested)="afterTested.emit($event)"
    (modelChange)="uiModelChange($event)"
    [extraButtonTmp]="saveButtonTmp"
  ></eo-api-http-test-ui>
  <ng-template #saveButtonTmp>
    <!-- Disabled when testing -->
    <button
      type="button"
      [nzLoading]="isSaving"
      eo-ng-button
      nzType="default"
      [disabled]="!!model?.testStartTime"
      (click)="save($event)"
      trace
      traceID="save_api_document_from_test"
    >
      {{ instance.saveTips }}
    </button>
  </ng-template></div
>
